<template>
  <div>
    <div
      v-for="(item, i) in data"
      :key="i"
      class="content-wapper"
      @click="goArticleContent(item.art_id)"
    >
      <!-- 不是1张图 -->
      <div
        v-if="item.cover.type !== 1"
        class="content-imgs"
      >
        <div class="content-title">
          <span>{{ item.title }}</span>
        </div>
        <div
          class="content-img"
        >
          <img
            v-for="(a, b) in item.cover.images"
            :key="b"
            :src="a"
          >
        </div>
        <div class="content-text">
          <span>{{ item.aut_name }}</span>
          <span>{{ item.comm_count }}评论</span>
          <span>{{ getTime(item.pubdate) }}</span>
          <span>x</span>
        </div>
      </div>
      <!-- 一张图 -->
      <div
        v-if="item.cover.type === 1"
        class="img1"
      >
        <div class="img-left">
          <div class="content-title">
            <span>{{ item.title }}</span>
          </div>
          <div class="content-text">
            <span>{{ item.aut_name }}</span>
            <span>{{ item.comm_count }}评论</span>
            <span>{{ getTime(item.pubdate) }}</span>
            <span>x</span>
          </div>
        </div>
        <div
          class="content-img"
        >
          <img
            v-for="(a, b) in item.cover.images"
            :key="b"
            :src="a"
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'ArticleList',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  methods: {
    getTime(time) {
      return moment(time, 'YYYYMMDD').fromNow()
    },
    goArticleContent(id) {
      this.$router.push({
        path: '/articleContent',
        query: {
          article_id: id
        }
      })
    }
  },
}
</script>

<style lang='less' scoped>
.content-wapper {
  overflow: auto;
  padding: 10px 12px;
  .content-imgs {
    border-bottom: 1px solid #ddd;
  }
    .content-img {
      margin: 10px 0;
      width: 100%;
      >img {
        margin: 0  4px;
        width: 30%;
        // 图片适应父盒子的宽高
        object-fit: cover;
        border-radius: 4px;
      }
    }

    .content-img1 {
      width: 35%;
      margin-left: 60%;
      background-size: cover;
      >img {
        width: 100%;
        height: 100%;
        border-radius: 4px;
      }
    }
    .content-text {
      margin-bottom: 10px;
      position: relative;
      >span {
        margin-right: 6px;
        font-size: 14px;
        color: #aaa;
        &:last-child {
          position: absolute;
          top: 15%;
          right: 0;
        }
      }
    }
}

.img1 {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: round;
  border-bottom: 1px solid #ddd;
  .img-left {
    width: 65%;
    >div:first-child {
      margin-bottom: 40px;
    }
    .content-text {
      position: relative;
      >span {
        margin-right: 6px;
        font-size: 14px;
        color: #aaa;
        &:last-child {
          position: absolute;
          top: 15%;
          right: -56%;
        }
      }
    }
  }
  .content-img {
    margin: 0 4px;
    width: 32%;
    height: 4rem;
    >img {
      // 图片适应父盒子的宽高
        object-fit: cover;
      width: 100%;
      height: 100%;
    }
  }
}

</style>
